<template>
    <div>
        <div id="myChart4zrender" :style="style" style="top:40px"></div>
    </div>
</template>
<script>
export default {
    data () {
        return{
            totalData:[]
        }
    },
    mounted(){
        this.loadTotalData();
    },
    methods: {
        loadTotalData(){
            var _this = this;
            this.postRequest("/account/getTotalData1",{
                timeStr:this.setTime
            }).then(resp=>{
                if(resp&&resp.status==200){
                    _this.totalData=resp.data
                }
                this.drawLine()
            })
        },
        drawLine(){
            let myChart4zrender = this.$echarts.init(document.getElementById('myChart4zrender'));
            let name=[];
            let forColor=[];
            let _this = this
            let i=255
            this.totalData.forEach(function(item){
                name.push(item.project_name);
                forColor.push('rgb(255,'+i+',0)')
                if(i>28)
                i-=28
            })
            console.log(forColor)
            let option={
                color:forColor,
                title : {
                    text: '加班统计',
                    x:'center',
                    y:'350'
                },
                tooltip : {
                    trigger: 'item',
                    backgroundColor : 'rgba(0,0,250,0.2)'
                },
                legend: {
                // orient : 'vertical',
                    //x : 'center',
                    icon:'star3',
                    data: function (){
                        var list=[];
                        _this.totalData.forEach(function(item){
                            list.push({
                                name:item.project_name,
                                
                            })
                        })
                    }()
                },
                toolbox: {
                    show : true,
                    orient : 'vertical',
                    y:'center',
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
            polar : [
                {
                    indicator : [
                        { text: '加班金额', max: 20000},
                        { text: '加班次数', max: 100},
                        { text: '加班时间', max: 300}
                        ],
                        center : ['50%', 240],
                        radius : 150
                    }
                ],
                calculable : false,
                series : (function (){
                    var series = [];
                    // for (var i = 1; i <= 28; i++) {
                    //     series.push({
                    //         name:'浏览器（数据纯属虚构）',
                    //         type:'radar',
                    //         symbol:'none',
                    //         itemStyle: {
                    //             normal: {
                    //                 lineStyle: {
                    //                 width:1
                    //                 }
                    //             },
                    //             emphasis : {
                    //                 areaStyle: {color:'rgba(0,250,0,0.3)'}
                    //             }
                    //         },
                    //         data:[
                    //         {
                    //             value:[
                    //                 (40 - i) * 10,
                    //                 (38 - i) * 4 + 60,
                    //                 i * 5 + 10,
                    //                 i * 9,
                    //                 i * i /2
                    //             ],
                    //             name:i + 2000
                    //         }
                    //         ]
                    //     })
                    // }
                    var i=0;
                    _this.totalData.forEach(function(item){
                        series.push({
                            name:item.project_name+'的加班统计',
                            type:'radar',
                            symbol:'none',
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        width:1
                                       
                                    }
                                },
                                emphasis : {
                                    areaStyle: {color:'rgba(0,250,0,0.3)'}
                                }
                            },
                            areaStyle: {
                                normal: {
                                    opacity: 0
                                }
                            },
                            data:[{
                                value:[
                                    item.money,
                                    item.ci,
                                    item.time
                                ],
                                name:item.project_name
                            }]
                        })
                        i+=100
                    })
                    return series;
                })(),
                animation:true
            };
             myChart4zrender.setOption(option, true);
        }
    },
    props:{
        width2zrender: {
        type: String,
        default: "100%"
        },
        height2zrender: {
        type: String,
        default: "500px"
        },
        setTime:{
            type:String,
            default:'-1'
        }
    },
    computed: {
        style(){
            return {
                height: this.height2zrender,
                width: this.width2zrender,
            };
        }
    },
    watch:{
        setTime:function(value,oldValue){
            this.loadTotalData();
        }
    }
}
</script>
